'use client';
import Image from 'next/image';
import Link from 'next/link';
import styles from './page.module.css';

export default function Mp() {
    return (
        <div className={styles.container}>
            {/* Header */}
            <div className={styles.header}>
                <Link href='/profile'>
                    <div className={`${styles['back-button']} flex items-center`}>
                        <Image src="/icons/left.svg" alt="arrow-left" width={24} height={24} />
                        <span>返回</span>
                    </div>
                </Link>
                <span className={styles.title}>会员码</span>
                <div className={styles.right}></div>
            </div>

            {/* Content */}
            <div className={styles.content}>
                <div className={styles.title}>门票码</div>
                <div className={styles.description}>请在入园或工作员要求时展示该码</div>
                <Image src="/avatars/zfm3.png" alt="QR Code" width={100} height={100} className={styles['qr-code']} />
                <Image src="/avatars/zfm4.png" alt="QR Code" width={250} height={50} className={styles['qr-codes']} />
                <div className={styles['refresh-button']} onClick={() => console.log('Refresh QR Code')}>
                    刷新
                </div>


                {/* Footer */}
                <div className={styles.footer}>
                    <Link href="/membership" className={styles.item}>
                        <Image src="/avatars/二维码.svg" alt="Payment Icon" width={24} height={24} />
                        支付码
                    </Link>

                    <Link href="/friend" className={styles.item}>
                        <Image src="/avatars/性息交友.svg" alt="Friend Icon" width={24} height={24} />
                        交友码
                    </Link>

                    <Link href="/mp" className={styles.item}>
                        <Image src="/avatars/支付码.svg" alt="Membership Icon" width={24} height={24} />
                        门票码
                    </Link>
                </div>

                {/* Advertisement */}
                <div className={styles.advertisement}>
                    广告位招租
                </div>
            </div>
        </div>
    );
}